<template>
	<view>
		<view style="display: flex; padding-top: 48rpx; padding-bottom: 48rpx; justify-content: center;">
			<image src="/static/my/avatar-default.png" style="width: 168rpx; height: 168rpx; border-radius: 84rpx;"></image>
		</view>
		
		<view class="item-box" @tap="navToUpdateNickname">
			<view class="item-title">昵称</view>
			<view class="item-desc">{{user.name}}</view>
			<image src="/static/indicator-right.png" style="width: 32rpx; height: 32rpx;" class="item-icon"></image>
		</view>
		<view class="item-box">
			<view class="item-title">账号</view>
			<view class="item-desc">{{user.username}}</view>
		</view>
		<view class="item-box">
			<view class="item-title">User ID</view>
			<view class="item-desc">{{user.inviteCode}}</view>
			<image src="/static/copy.png" style="width: 48rpx; height: 48rpx;" class="item-icon" @tap="copyCode"></image>
		</view>
		<!-- <view class="item-box">
			<view class="item-title">更多</view>
			<image src="/static/indicator-right.png" style="width: 32rpx; height: 32rpx;" class="item-icon"></image>
		</view> -->
		
		<view class="item-box" style="justify-content: center; margin-top: 48rpx;"
			@tap="confirmLogout">
			<view style="color: rgba(243, 85, 112, 1);">退出登录</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { http } from '@/utils/request'
	import { onMounted } from 'vue'
	
	
	const user = reactive({
		name: '',
		username: '',
		inviteCode: '',
	})
	
	const navToUpdateNickname = ()=>{
		uni.navigateTo({
			url: '/pages/my/update_nickname'
		})
	}
	
	const getUserInfo = ()=>{
		http.request({
			url: '/app/user/login_user',
			method: 'GET'
		}).then(resp => {
			Object.assign(user, resp.data);
		})
	}
	
	
	const copyCode = ()=>{
		uni.setClipboardData({
			data: user.inviteCode,
			success: ()=>{
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	
	
	const confirmLogout = ()=>{
		uni.showModal({
			title: "确认",
			content: "确认退出登录?",
			success: (res)=> {
				if (res.confirm) {
					uni.setStorageSync('token', '');
					uni.reLaunch({
						url: '/pages/login'
					})
				}
			}
		})
	}
	
	onMounted(()=>{
		getUserInfo();
		uni.$on("app_update_user_info", ()=>{
			getUserInfo();
		})
	})
	
</script>

<style lang="scss" scoped>
	.item-box {
		display: flex; 
		margin: 16rpx 32rpx 0 32rpx;
		border-radius: 16rpx;
		height: 100rpx;
		padding: 0 16rpx;
		flex-direction: row;
		align-items: center;
		background: rgba(250, 250, 250, 1);
		
		
		.item-title {
			font-size: 32rpx;
			font-weight: 800;
			flex: 1
			
		}
		
		
		.item-desc {
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
		}
		
		.item-icon {
			margin-left: 16rpx;
		}
	}
</style>